import { Component } from '@angular/core';
declare var $:any;
import '../styles/index.css'
var mqtt = require('mqtt');
@Component({
  selector: 'my-app',
  template: `
  <div class="menu">
  <div><img  src="/assets/img/timg.png" alt="Stage-logo" />
  <h3>mqtt over websocket</h3>
  <h5>power by Rosarugosa</h5>
  <button class="bttn-stretch bttn-lg bttn-primary" data-toggle="modal" data-target="#myModal">创建话题</button>
  <button class="bttn-stretch bttn-lg bttn-primary" data-toggle="modal" data-target="#myModal">进入话题</button>
  </div>
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">输入话题名字</h4>
            </div>
            <div class="modal-body">
              <label for="name">名称</label>
              <input type="text" class="form-control" id="name" placeholder="请输入名称" [(ngModel)]="title">
              </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" (click)="onSub()">提交更改</button>
            </div>
        </div>
    </div>
</div>
</div>
  `
})
export class IndexComponent {
  title;
  onSub(): void {
    window.location.href = "/#/topic/" + this.title;
    $('#myModal').modal('hide')
  }
}

